<template>
  <div class=" ">
    <box title="总体统计">
      <div class="h-[116px] flex justify-between items-center">
        <div class="flex-1 flex place-content-center" v-for="(item, index) in
                        countAllList" :key="item.name">
          <div class="w-[48px] h-[50px] ">
            <el-image class="w-[48px] h-[50px]" :src="item.img">
            </el-image>
          </div>
          <div class="h-[50px] pl-[18px]">
            <div class="alltext">{{ isNullOrEmpty( item.name ) }}</div>
            <div class="gradients-text text-[26px] pt-[13px]" v-if="item.number <= 999">{{ isNullOrEmpty( item.number ) }}</div>
            <div class="gradients-text text-[26px] pt-[13px]" v-else>999+</div>
          </div>
        </div>
      </div>
    </box>
  </div>
</template>
<script setup>
import { isNullOrEmpty } from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import {screenstatisticals} from '@/api/screen/largeData'
import {useDataDashboardThemeStore} from '@/store/modules/data-dashboard-theme'

import img2 from '@/assets/screenimg/indivedual@2x.png'
import img3 from '@/assets/screenimg/family@2x.png'

const useDataDashboardTheme = ref()

const countAllList = ref([

  {
    name: '个体数量(个)',
    number: 0,
    img: img2
  },
  {
    name: '家庭数量(个)',
    number: 0,
    img: img3
  }
])
// watch(() => useDataDashboardThemeStore().GET_SETTING('systematicId'), () => {

//   setTimeout(() => {
//     useDataDashboardTheme.value = useDataDashboardThemeStore().GET_SETTING('systematicId')
//     getscreenproject()
//   }, 100)


// })
onMounted(() => {
  getscreenproject()
})
//项目概况

const getscreenproject = () => {
  screenstatisticals().then(res => {
    console.log("获取个体概况", res);
     countAllList.value[0].number = res.result.data.customers
     countAllList.value[1].number = res.result.data.familys

  })
}
</script>
<style scoped lang="scss"></style>
